<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="format-detection" content="telephone=no;email=no">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<link rel="stylesheet" href="../../css/style.css">
		<title>投票详情</title>
		<style>
			html,
			body {
				background-color: #fff;
			}
			
			ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			p {
				color: #000;
			}
			
			a {
				color: #000;
			}
			
			.mui-bar {
				z-index: 20;
			}
			
			.details-container {
				margin-top: 60px;
				padding-bottom: 50px;
			}
			
			.details-container--ios {
				position: absolute;
				top: 45px;
				bottom: 50px;
				margin-top: 0;
				padding-bottom: 0;
				overflow: auto;
			}
			
			.details {
				padding: 0 10px;
			}
			
			.details .details-title {
				margin: 10px 5px;
				text-align: justify;
				font-size: 24px;
				font-weight: normal;
			}
			
			.details .details-meta {
				margin: 0 5px;
				margin-bottom: 10px;
				padding-bottom: 10px;
				font-size: 14px;
				color: #ddd;
				border-bottom: 1px solid #ddd;
			}
			
			.details-meta .details-meta__source,
			.details-meta .details-meta__time {
				margin-right: 10px;
			}
			
			.details .details-img {
				margin: 10px 0 20px 0;
				text-align: center;
				font-size: 14px;
				color: #ddd;
			}
			
			.details .details-content {
				padding: 0 5px;
				line-height: 1.8;
			}
			
			.details .details-content img {
				max-width: 100%;
				height: auto;
			}
			
			.details .details-content p,
			.details .details-content span {
				font-size: 18px;
				text-align: justify !important;
				white-space: normal !important;
				word-wrap: break-word !important;
			}
			
			.art-share {
				padding: 0 10px;
			}
			
			.art-share dt {
				margin-bottom: 20px;
				text-align: center;
				font-size: 0;
			}
			
			.art-share dt span {
				display: inline-block;
				vertical-align: middle;
			}
			
			.art-share dt .share-head {
				width: 20%;
				font-size: 17px;
			}
			
			.art-share dt .cut-line {
				width: 40%;
				height: 1px;
				background-color: #ddd;
			}
			
			.art-share dd {
				margin: 0;
				padding: 0;
				display: -webkit-flex;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.art-share dd a {
				-webkit-flex: 1;
				flex: 1;
				text-align: center;
			}
			
			.art-share dd .mui-icon {
				width: 50px;
				height: 50px;
				display: inline-block;
				margin: 3px;
				padding-top: 8px;
				font-size: 32px;
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
			}
			
			.art-share .shareqq {
				color: #4dafea;
			}
			
			.art-share .sharewx {
				color: #20da12;
			}
			
			.art-share .sharewb {
				color: #ff0000;
			}
			
			.art-share dd .share-name {
				display: block;
				margin-top: 10px;
				color: #929292;
			}
			
			.details .video-wrapper {
				position: relative;
				width: 100%;
				margin-bottom: 36px;
			}
			
			.video-wrapper .video-img {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 9;
			}
			
			.video-wrapper .video-img img {
				display: block;
				width: 100%;
				height: 100%;
			}
			
			.video-wrapper .video-mask {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 10;
				background-color: rgba(0, 0, 0, .4);
			}
			
			.video-wrapper .play-btn {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 11;
				margin: auto;
				display: block;
				width: 58px;
				height: 58px;
				border: 2px solid #fff;
				border-radius: 50%;
			}
			
			.video-wrapper .play-btn .play-btn__icon {
				display: block;
				position: absolute;
				top: 0;
				left: 15%;
				bottom: 0;
				right: 0;
				margin: auto;
				width: 0;
				height: 0;
				border-left: 20px solid #fff;
				border-top: 15px solid transparent;
				border-bottom: 15px solid transparent;
			}
			
			.video-wrapper .play-btn:active {
				-webkit-box-shadow: 0 0 8px #fff;
				box-shadow: 0 0 8px #fff;
			}
			
			.related .related-head {
				height: 30px;
				line-height: 30px;
				padding-left: 10px;
				margin: 0;
				color: #b1b1b1;
				font-size: 16px;
				background-color: #e6e6e6;
			}
			
			.related .related-head .iconfont {
				margin-right: 5px;
				vertical-align: middle;
				font-size: 24px;
			}
			
			.related .related-content {
				padding: 0 10px;
			}
			
			.related-content a {
				display: block;
				padding-bottom: 10px;
				margin-top: 10px;
				border-bottom: 1px solid #ddd;
			}
			
			.related-content li:last-child a {
				border-bottom: 0;
			}
			
			.related-content .related-content__title {
				margin-bottom: 10px;
				text-align: justify;
				font-size: 16px;
			}
			
			.related-content .related-content__meta {
				color: #ddd;
				font-size: 14px;
			}
			
			.related-content__meta .meta-time {
				margin-right: 20px;
			}
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #929292;
			}
			
			.mui-bar-tab .mui-badge {
				padding: 0 6px;
				border-radius: 6px;
			}
			
			.settings .mui-table-view.more-setting {
				background-color: #fff;
			}
			
			.settings .mui-table-view.more-setting .mui-table-view-cell {
				border: none;
			}
			
			.settings .mui-table-view.more-setting .mui-media .mui-icon {
				padding: 5px;
				font-size: 2em;
				border: 1px solid #ddd;
				border-radius: 50%;
			}
			
			.mui-table-view.more-setting {
				width: auto;
			}
			
			.mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after {
				background-color: transparent;
			}
			
			.mui-popover .mui-table-view {
				background-color: #fff;
			}
			
			.more-share {
				width: 46px;
				height: 46px;
			}
			
			.more-share .iconfont {
				font-size: 26px;
			}
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #929292;
			}
			
			.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn) {
				overflow: visible;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				overflow: visible;
			}
			
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4px;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			
			.mui-preview-loading.mui-active {
				display: block;
			}
			
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			.answer {
				padding: 0 15px;
			}
			
			.answer .mui-checkbox input[type=checkbox]:checked:before,
			.answer .mui-radio input[type=radio]:checked:before,
			.answer .mui-checkbox input[type=radio]:checked:before {
				color: #159ceb;
			}
			
			.answer .mui-checkbox input[type=radio] {
				position: absolute;
				top: 4px;
				left: 20px;
				display: inline-block;
				width: 28px;
				height: 26px;
				border: 0;
				outline: 0!important;
				background-color: transparent;
				-webkit-appearance: none;
			}
			
			.answer .mui-checkbox input[type=radio]:before {
				font-family: Muiicons;
				font-size: 28px;
				font-weight: 400;
				line-height: 1;
				text-decoration: none;
				color: #aaa;
				border-radius: 0;
				background: 0 0;
				-webkit-font-smoothing: antialiased;
			}
			
			.answer .mui-checkbox input[type=radio]:before {
				content: '\e411';
			}
			
			.answer .mui-checkbox input[type=radio]:checked:before {
				content: '\e442';
			}
			
			.answer .answer-group {
				margin-bottom: 15px;
				padding-bottom: 10px;
				border-bottom: 1px dashed #ddd;
			}
			
			.answer-group h4 {
				margin: 10px 0;
				text-align: justify;
				line-height: 1.2;
				font-weight: normal;
			}
			
			.answer-group label {
				font-size: 18px;
			}
			
			.vote {
				padding: 0 15px 15px;
				text-align: center;
			}
			
			.vote .vote-btn {
				padding: 6px 70px;
				font-size: 18px;
				letter-spacing: 2px;
				border: 0;
			}
			
			.votes-row {
				margin: 0 0 10px 10px;
			}
			
			.votes-row .votes-title {
				text-align: justify;
				font-size: 18px;
			}
			
			.votes-row .votes-total {
				display: -webkit-flex;
				display: flex;
			}
			
			.votes-total .votes-progressbar {
				position: relative;
				-webkit-flex: 1;
				flex: 1;
				display: -webkit-flex;
				display: flex;
				-webkit-align-items: center;
				align-items: center;
				margin-top: 2px;
				height: 12px;
			}
			
			.votes-progressbar .progressbar {
				width: 0;
				height: 100%;
				border-radius: 10px;
				-webkit-transition: width .8s linear;
						transition: width .8s linear;
			}
			
			.votes-progressbar .votes-percent {
				width: 32px;
				margin-left: 5px;
				vertical-align: middle;
				font-size: 10px !important;
			}
			
			.votes-total .votes-number {
				margin-left: 10px;
				text-align: right;
				font-size: 18px;
			}
			
			.votes-row:nth-child(3n+1) .progressbar {
				background-color: #f39900;
			}
			
			.votes-row:nth-child(3n+2) .progressbar {
				background-color: #159ceb;
			}
			
			.votes-row:nth-child(3n+3) .progressbar {
				background-color: #c30e22;
			}
			
			.votes-row:nth-child(3n+1) .progressbar+.votes-percent {
				color: #f39900;
			}
			
			.votes-row:nth-child(3n+2) .progressbar+.votes-percent {
				color: #159ceb;
			}
			
			.votes-row:nth-child(3n+3) .progressbar+.votes-percent {
				color: #c30e22;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav navbar-default">
			<a class="mui-action-back mui-icon iconfont mui-pull-left c-white">&#xe603;</a>
			<a href="#settings" class="mui-icon iconfont mui-pull-right c-white">&#xe602;</a>
			<h1 class="mui-title c-white">临空港新闻</h1>
		</header>
		<div class="details-container">
			<!-- 正文模块 -->
			<section class="mui-content bg-white">
				<section>
					<article class="details" id="content">
						<!--<h2 class="details-title">投票主题：2016马克杯，为您最喜欢的主持人投票</h2>
						<div class="details-meta">
							<span class="details-meta__source">东西湖人民政府网</span>
							<time class="details-meta__time">2016-10-26 09:50:04</time>
							<!--<span class="details-meta__author">{{obj.author}}</span>
						</div>
						<div class="details-content" id="textBody">
							<p style="text-align: justify;">
								投票说明：
							</p>
							<p style="text-align: justify;">上午十点，曹裕江来到病房，只见101岁的老人穿着长征时期的红军军装坐在那里，精神抖擞。曹裕江亲切询问老人的身体状况，并帮他佩戴上纪念章，同时将一万元的慰问金送到老人手中。
							</p>
							<p style="text-align: justify;">
								<img src="http://img.dongxihu.gov.cn/634/s_86821477380344635.jpg" title="86821477380344635.jpg" alt="249A7265modi.jpg" data-preview-src="" data-preview-group="1">
							</p>
							<p style="text-align: justify;">曹裕江说，赵老作为武汉为数不多在世的老红军，是东西湖人民的骄傲，是区委区政府的骄傲。今年是纪念红军长征胜利八十周年，按照习总书记的要求，每一代人有每一代人新的长征，我们要弘扬伟大的长征精神，立足本职岗位，不断把中国特色社会主义事业在东西湖临空港的具体工作任务中落实到位。
							</p>
						</div>
						<form class="answer">
							<div class="answer-group">
								<h4 class="mui-content-padded">你最喜欢的娱乐主持人是谁？（单选）</h4>
								<div class="answer-options">
									<!-- 统计
									<div class="votes-row">
										<p class="votes-title">何炅何炅何炅何炅何炅何炅何炅何炅何炅何炅何炅</p>
										<div class="votes-total">
											<div class="votes-progressbar">
												<span class="progressbar"></span>
												<span class="votes-percent">30%</span>
											</div>
											<div class="votes-number">30票</div>
										</div>
									</div>
									<div class="votes-row">
										<p class="votes-title">李维嘉</p>
										<div class="votes-total">
											<div class="votes-progressbar">
												<span class="progressbar"></span>
												<span class="votes-percent">20%</span>
											</div>
											<div class="votes-number">20票</div>
										</div>
									</div>
									<div class="votes-row">
										<p class="votes-title">谢娜</p>
										<div class="votes-total">
											<div class="votes-progressbar">
												<span class="progressbar"></span>
												<span class="votes-percent">50%</span>
											</div>
											<div class="votes-number">50票</div>
										</div>
									</div>
									
									
									<!-- 选项 
									<div class="mui-input-row mui-checkbox mui-left">
										<label>何炅</label>
										<input name="checkbox" type="radio">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>李维嘉</label>
										<input name="checkbox" type="radio">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>谢娜</label>
										<input name="checkbox" type="radio" checked>
									</div>
								</div>
							</div>
							<div class="answer-group">
								<h4 class="mui-content-padded">你最喜欢的娱乐主持人是谁你最喜欢的娱乐主持人是谁？（多选）</h4>
								<div class="answer-options">
									<div class="mui-input-row mui-checkbox mui-left">
										<label>董卿</label>
										<input name="checkbox" type="checkbox" checked>
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>撒贝宁</label>
										<input name="checkbox" type="checkbox" checked>
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>朱军</label>
										<input name="checkbox" type="checkbox">
									</div>
									<div class="mui-input-row mui-checkbox mui-left">
										<label>李思思</label>
										<input name="checkbox" type="checkbox">
									</div>
								</div>
							</div>
							<div class="vote">
								<button type="button" class="mui-btn c-white bg-blue vote-btn">投票</button>
							</div>
						</form> -->
					</article>
				</section>
				<!-- 分享 -->
				<section id="shareGroup" style="display: none;">
					<div class="art-share" id="artShare">
						<dl>
							<dt>
								<span class="cut-line"></span>
								<span class="share-head">分享到</span>
								<span class="cut-line"></span>
							</dt>
							<dd>
								<a class="shareqq" href="javascript:;">
									<span class="mui-icon mui-icon-qq"></span>
									<span class="share-name">QQ</span>
								</a>
								<a class="sharewx" href="javascript:;">
									<span class="mui-icon mui-icon-weixin"></span>
									<span class="share-name">微信</span>
								</a>
								<a class="sharewb" href="javascript:;">
									<span class="mui-icon mui-icon-weibo"></span>
									<span class="share-name">新浪微博</span>
								</a>
							</dd>
						</dl>
					</div>
				</section>
			</section>
			<!-- 相关阅读 -->
			<section id="related_section">
				<div class="related">
					<h3 class="related-head" id="relatedHead" style="display: none;">
						<i class="mui-icon iconfont">&#xe60b;</i>相关阅读
					</h3>
					<ul class="related-content" id="related">

					</ul>
				</div>
			</section>
		</div>
		<nav class="mui-bar mui-bar-tab" id="detailsBar">
			<a class="mui-tab-item" id="commentsNum" href="javascript:;">
				<span class="mui-icon iconfont">&#xe607;</span>
			</a>
			<a class="mui-tab-item" id="collectNum" href="javascript:;">
				<span class="mui-icon iconfont">&#xe609;</span>
			</a>
			<a class="mui-tab-item" id="praiseNum" href="javascript:;">
				<span class="mui-icon iconfont">&#xe61f;</span>
			</a>
			<a href="#settings" class="mui-tab-item">
				<span class="mui-icon iconfont">&#xe608;</span>
			</a>
		</nav>
		<!-- 更多操作 -->
		<div id="settings" class="settings mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view mui-grid-view mui-grid-9 more-setting">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="javascript:;">
						<span class="mui-icon iconfont">&#xe617;</span>
						<div class="mui-media-body">收藏</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="javascript:;">
						<span class="mui-icon iconfont">&#xe60d;</span>
						<div class="mui-media-body">正文字号</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="javascript:;">
						<span class="mui-icon more-share"><span class="iconfont">&#xe622;</span></span>
						<div class="mui-media-body">微信朋友圈</div>
					</a>
				</li>
				<li id="weixin" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="javascript:;">
						<span class="mui-icon iconfont">&#xe60e;</span>
						<div class="mui-media-body">微信好友</div>
					</a>
				</li>
				<li id="qq" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="javascript:;">
						<span class="mui-icon iconfont">&#xe610;</span>
						<div class="mui-media-body">QQ好友</div>
					</a>
				</li>
				<li id="sinaweibo" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="javascript:;">
						<span class="mui-icon iconfont">&#xe611;</span>
						<div class="mui-media-body">新浪微博</div>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#settings"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<!-- 缓存数据 -->
		<textarea id="contTemp" style="display: none;"></textarea>

		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/zepto.min.js"></script>
		<script src="../../js/mui.zoom.js"></script>
		<script src="../../js/mui.previewimage.js"></script>
		<script src="../../js/template.js"></script>
		<script src="../../js/base64.js"></script>
		<script src="../../js/common.js"></script>
		<!-- 详情正文模板 -->
		<script id="artContent" type="text/html">
			<h2 class="details-title">{{obj.title}}</h2>
			<div class="details-meta">
				<span class="details-meta__source">{{obj.source}}</span>
				<time class="details-meta__time">{{obj.releaseAt}}</time>
				<!-- <span class="details-meta__author">{{obj.author}}</span> -->
			</div>
			{{if obj.vedioUrl != ""}}
			<div class="video-wrapper">
				<video id="myVideo" width="100%" height="190" preload="none" controls>
					<source src="{{obj.vedioUrl}}" type="video/mp4">
					<source src="{{obj.vedioUrl}}" type='video/webm'>
					<source src="{{obj.vedioUrl}}" type='video/ogg'>
				</video>
				<div class="video-img"><img src="../../images/lauch/def/tj_def.png"></div>
				<div class="video-mask">
					<a href="javascript:;" class="play-btn" id="playBtn">
						<span class="play-btn__icon"></span>
					</a>
				</div>
			</div>
			{{/if}}
			<div class="details-content" id="textBody">
				{{obj.content}}
			</div>
			<!-- 投票 -->
			{{if obj.vote}}
			<form class="answer" id="formBody">
				<!-- 投票已结束 -->
				{{if obj.vote.overdue == 2}}
					{{each obj.vote.subjects as target i}}
						{{if target.isMutil == 0}} 
							<div class="answer-group" data-count="{{target.count}}">
								<h4 class="mui-content-padded">{{target.subject}}（单选）</h4>
								<div class="answer-options">
									{{each target.items as value i}} 
										<div class="votes-row">
											<p class="votes-title">{{value.item}}</p>
											<div class="votes-total">
												<div class="votes-progressbar">
													<span class="progressbar js-progressbar"></span>
													<span class="votes-percent">{{percentFormat(value.count,target.total)}}</span>
												</div>
												<div class="votes-number">{{value.count}}票</div>
											</div>
										</div>
									{{/each}}
								</div>
							</div>
						{{else}}
							<div class="answer-group" data-count="{{target.count}}">
								<h4 class="mui-content-padded">{{target.subject}}（多选）</h4>
								<div class="answer-options">
									{{each target.items as value i}} 
										<div class="votes-row">
											<p class="votes-title">{{value.item}}</p>
											<div class="votes-total">
												<div class="votes-progressbar">
													<span class="progressbar js-progressbar"></span>
													<span class="votes-percent">{{percentFormat(value.count,target.total)}}</span>
												</div>
												<div class="votes-number">{{value.count}}票</div>
											</div>
										</div>
									{{/each}}
								</div>
							</div>
						{{/if}}
					{{/each}}
				<!-- 投票进行中 -->
				{{else if obj.vote.overdue == 1}}
					{{if obj.vote.hasVoted == false}}
						{{each obj.vote.subjects as target i}}
							{{if target.isMutil == 0}} 
								<div class="answer-group">
									<h4 class="mui-content-padded">{{target.subject}}（单选）</h4>
									<div class="answer-options">
										{{each target.items as value i}} 
											<div class="mui-input-row mui-checkbox mui-left">
												<label>{{value.item}}</label>
												<input name="{{value.subjectId}}" type="radio" data-id="{{value.id}}" data-subjectId="{{value.subjectId}}" data-item="{{value.item}}" value="{{value.count}}">
											</div>
										{{/each}}
									</div>
								</div>
							{{else}}
								<div class="answer-group" data-count="{{target.count}}">
									<h4 class="mui-content-padded">{{target.subject}}（多选）</h4>
									<div class="answer-options">
										{{each target.items as value i}} 
											<div class="mui-input-row mui-checkbox mui-left">
												<label>{{value.item}}</label>
												<input name="{{value.subjectId}}" type="checkbox" data-id="{{value.id}}" data-subjectId="{{value.subjectId}}" data-item="{{value.item}}" value="{{value.count}}">
											</div>
										{{/each}}
									</div>
								</div>
							{{/if}}
						{{/each}}
						<div class="vote">
							<button type="button" class="mui-btn c-white bg-blue vote-btn" id="voteBtn">投票</button>
						</div>
					{{else}}
						{{each obj.vote.subjects as target i}}
							{{if target.isMutil == 0}} 
								<div class="answer-group">
									<h4 class="mui-content-padded">{{target.subject}}（单选）</h4>
									<div class="answer-options">
										{{each target.items as value i}} 
											<div class="votes-row">
												<p class="votes-title">{{value.item}}</p>
												<div class="votes-total">
													<div class="votes-progressbar">
														<span class="progressbar js-progressbar"></span>
														<span class="votes-percent">{{percentFormat(value.count,target.total)}}</span>
													</div>
													<div class="votes-number">{{value.count}}票</div>
												</div>
											</div>
										{{/each}}
									</div>
								</div>
							{{else}}
								<div class="answer-group" data-count="{{target.count}}">
									<h4 class="mui-content-padded">{{target.subject}}（多选）</h4>
									<div class="answer-options">
										{{each target.items as value i}} 
											<div class="votes-row">
												<p class="votes-title">{{value.item}}</p>
												<div class="votes-total">
													<div class="votes-progressbar">
														<span class="progressbar js-progressbar"></span>
														<span class="votes-percent">{{percentFormat(value.count,target.total)}}</span>
													</div>
													<div class="votes-number">{{value.count}}票</div>
												</div>
											</div>
										{{/each}}
									</div>
								</div>
							{{/if}}
						{{/each}}
					{{/if}}
				<!-- 投票未开始 -->
				{{else}}
					{{each obj.vote.subjects as target i}}
						{{if target.isMutil == 0}} 
							<div class="answer-group">
								<h4 class="mui-content-padded">{{target.subject}}（单选）</h4>
								<div class="answer-options">
									{{each target.items as value i}} 
										<div class="mui-input-row mui-checkbox mui-left">
											<label>{{value.item}}</label>
											<input name="{{value.subjectId}}" type="radio">
										</div>
									{{/each}}
								</div>
							</div>
						{{else}}
							<div class="answer-group" data-count="{{target.count}}">
								<h4 class="mui-content-padded">{{target.subject}}（多选）</h4>
								<div class="answer-options">
									{{each target.items as value i}} 
										<div class="mui-input-row mui-checkbox mui-left">
											<label>{{value.item}}</label>
											<input name="{{value.subjectId}}" type="checkbox">
										</div>
									{{/each}}
								</div>
							</div>
						{{/if}}
					{{/each}}
					<div class="vote">
						<button type="button" class="mui-btn c-white bg-blue vote-btn" id="voteBtn">投票</button>
					</div>
				{{/if}}
			</form>
			{{/if}}
		</script>

		<!-- 相关阅读模板 -->
		<script id="rltContent" type="text/html">
			{{each relNews as value i}}
				<li>
					<a href="{{value.outerLinkUrl}}" data-id="{{value.id}}" data-title="{{value.title}}" data-type="{{value.type}}" data-columnsId="{{value.columnsId}}" data-subjectId="{{value.subjectId}}" data-isOuterLink="{{value.isOuterLink}}">
						<div class="related-content__title">{{value.title}}</div>
						<div class="related-content__meta">
							<time class="meta-time">{{value.releaseAt}}</time>
							<span class="meta-source">{{value.source}}</span>
						</div>
					</a>
				</li>
			{{/each}}
		</script>
		<script>
			var uuid = null,
				newsId = null,
				praiseNum = null,
				title = null,
				abstractInfor = null,
				shares = {},
				questionsDetail = null,
				carouselImage = null; //首图
				
			mui.init({
				beforeback: function() {
					if(document.getElementById("myVideo")) {
						mui("#myVideo")[0].pause();
					}
					var modeFlag = localStorage.getItem("modeFlag");
					if(modeFlag) {
						plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
						plus.navigator.setStatusBarBackground("#000");
					} else {
						var ws = plus.webview.currentWebview().opener();
						if(ws.id == "news_list.html") {
							plus.navigator.setStatusBarStyle("UIStatusBarStyleDefault");
							plus.navigator.setStatusBarBackground("#fefefe");
						} else if(ws.id == "yx_sub.html") {
							plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
							plus.navigator.setStatusBarBackground("#0173d8");
						}
					}
					//返回true，继续页面关闭逻辑
					return true;
				},
				swipeBack: true //启用右滑关闭功能
			});
			//添加night自定义事件监听
			/*window.addEventListener('night', function(event) {
				lkg.nightMode();
			});*/
			//添加read自定义事件监听
			/*window.addEventListener('read', function(event) {
				var currentType = plus.networkinfo.getCurrentType();
				var readMode = localStorage.getItem("readMode");
				if (readMode == 1) {
					if (currentType === plus.networkinfo.CONNECTION_WIFI) {
						showImg("#textBody");
					} else {
						hideImg("#textBody");
					}
				} else if (readMode == 2) {
					showImg("#textBody");
				} else if (readMode == 3) {
					hideImg("#textBody");
				}
			});*/
			mui.plusReady(function() {
				if(mui.os.ios) {
					$(".details-container").addClass("details-container--ios");
				}
				var modeFlag = localStorage.getItem("modeFlag");
				if(modeFlag) {
					plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
					plus.navigator.setStatusBarBackground("#000");
				} else {
					plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
					plus.navigator.setStatusBarBackground("#159ceb");
				}
				var self = plus.webview.currentWebview();
				var id = self.newsId;
				uuid = plus.device.uuid; //获取设备的唯一标识
				//根据id向服务器请求新闻详情
				$("#content").empty();
				$("#related").empty();
				$("#textBody").empty();
				$("#related_section").css("display", "block");
				getDetails(id);
				plus.share.getServices(function(s) {
					if(s && s.length > 0) {
						for(var i = 0; i < s.length; i++) {
							var t = s[i];
							shares[t.id] = t;
						}
					}
				}, function() {
					console.log("获取分享服务列表失败");
				});
			});

			function getDetails(id) {
				plus.nativeUI.showWaiting("", {
					width: "50px",
					height: "50px",
					background: "rgba(255, 255, 255, 0)",
					style: "black"
				});
				mui.ajax({
					url: baseUrl + '/news/detailTP?id=' + id + '&devicesId=' + uuid,
					dataType: 'json',
					type: 'get',
					success: function(data) {
						if(data.returnFlag == 0) {
							data.obj.content = utf8to16(base64decode(data.obj.content));
							newsId = data.obj.id;
							praiseNum = data.obj.praiseNum;
							title = data.obj.title;
							abstractInfor = data.obj.abstractInfor;
							//首图
							carouselImage = data.obj.carouselImage;
							var artHtml = template('artContent', data);
							var rltHtml = template('rltContent', data);
							if(data.obj.commentsNum != 0) {
								$("#commentsNum").find(".mui-icon").append('<span class="mui-badge">' + data.obj.commentsNum + '</span>');
							} 
							else {
								$("#commentsNum").find(".mui-icon").html('&#xe607;');
							}
							if(data.myOp.collectOp != 0) {
								$("#collectNum").addClass("c-blue").find(".iconfont").html("&#xe61c;");
							}
							if(data.myOp.praiseOp != 0) {
								$("#praiseNum").addClass("c-blue").find(".iconfont").html("&#xe61e;");
								$("#praiseNum").find(".iconfont").append('<span class="mui-badge">' + data.obj.praiseNum + '</span>');
							}
							if(data.obj.praiseNum != 0) {
								$("#praiseNum").find(".mui-icon").append('<span class="mui-badge">' + data.obj.praiseNum + '</span>');
							} 
							else {
								$("#praiseNum").find(".mui-icon").html('&#xe61f;');
							}
							$("#contTemp").html(artHtml);
							$("#textBody").html(data.obj.content);
							var currentType = plus.networkinfo.getCurrentType();
							var readMode = localStorage.getItem("readMode");
							if(readMode == 1) {
								if(currentType === plus.networkinfo.CONNECTION_WIFI) {
									showImg("#textBody");
								} else {
									hideImg("#textBody");
								}
							} else if(readMode == 2) {
								showImg("#textBody");
							} else if(readMode == 3) {
								hideImg("#textBody");
							}
							$("#textBody").find("iframe").css({
								"width": "100%",
								"height": "250px"
							});
							$("#content").html($("#contTemp").html());
							$("#shareGroup").css("display", "block");
							$("#textBody").find("*").css("font-size", "18px");
							$("#textBody").find("img").attr({
								"data-preview-src": "",
								"data-preview-group": 1
							});
							mui.previewImage();
							if(document.getElementById("playBtn")) {
								document.getElementById("playBtn").addEventListener("tap", function() {
									mui("#myVideo")[0].play();
									$(".video-img").css("display", "none");
									$(".video-mask").css("display", "none");
								});
							}
							if(data.relNews.length > 0) {
								$("#relatedHead").css("display", "block");
								$("#related").html(rltHtml);
							} else {
								$("#related_section").css("display", "none");
							}
							var $textBody = $("#textBody");
							var $formBody = $("#formBody");
							var fontSize = plus.storage.getItem("fontFlag");
							//判断字体大小为多少号
							switch(fontSize) {
								case "1":
									$textBody.find("*").css("font-size", "14px"); //小
									$formBody.find("*").css("font-size", "14px");
									break;
								case "2":
									$textBody.find("*").css("font-size", "18px"); //中
									$formBody.find("*").css("font-size", "18px");
									break;
								case "3":
									$textBody.find("*").css("font-size", "22px"); //大
									$formBody.find("*").css("font-size", "22px");
									break;
							}
							
							var vote = data.obj.vote,
                            	$answerGroup = $formBody.find(".answer-group");
                            
                            //计算单个问题最后一个选项的百分比
                            $answerGroup.each(function(){
                            	var $this = $(this),
                            		$percent = $this.find(".votes-percent"),
                            		len = $percent.length,
                            		count = 0,
									limit = $this.attr("data-count");
                            	
                            	//限制多选可选中个数	
                            	$this.find("input[type='checkbox']").on("click", function(){
									if(this.checked){
										count++;
									}
									else{
										count--;
									}
									if(count > limit){
										plus.nativeUI.alert("您最多选择" + limit + "个选项！");
										$(this).prop("checked", false);
										count--;
									}
								});
                            });
                            
                            //投票单项统计百分比	
							progressbarFlash($formBody);
							
                            //选项选中状态
                            function isFlag(){
                            	var flag = null;
                            	
                            	$answerGroup.each(function(){
	                    			var selected = false;
	                    			
	                    			$(this).find("input").each(function(){
						                if(this.checked){
						                    selected = true;
						                }
						            });
						            if(!selected){
						                plus.nativeUI.alert("您还有选项未选！");
						                flag = selected;
						                return false;
						            }
						            else{
						            	flag = selected;
						            	return true;
						            }
	                    		});
	                    		return flag;
                            }
                            //投票按钮
                            if(document.getElementById("voteBtn")){
                            	document.getElementById("voteBtn").addEventListener("tap", function(){
                            		//判断是否存在未选中的选项
                            		if(!isFlag()){
                            			return false;
                            		}
                            		else{
                            			//判断投票活动状态
                            			if(vote.overdue == 0){
		                                    plus.nativeUI.alert("投票未开始！");
		                                }
		                                else if(vote.overdue == 1){
		                                	//判断是否投过票
		                                    if(vote.hasVoted == false){
		                                    	//判断是否需要登录
		                                        if(vote.isLogin == 1){
		                                        	//判断用户是否登录
		                                            if(isLogin()){
		                                                voteSuccess();
		                                            }
		                                            else{
		                                            	mui.openWindow({
		                                                    url: '../my_center/login.html',
		                                                    id: 'login.html',
		                                                    waiting: {
		                                                        autoShow: false
		                                                    }
		                                                });
		                                            }
		                                        }
		                                        else{
		                                        	voteSuccess();
		                                        }
		                                    }
		                                }
                            		}
	                            });
                            }
							plus.nativeUI.closeWaiting();
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理
						throwGetNewsError();
					}
				});
			}
			//添加列表项的点击事件
			mui('#related').on('tap', 'a', function(e) {
				var $this = $(this);
				var id = $this.attr('data-id');
				var columnsId = $this.attr("data-columnsId");
				var type = $this.attr("data-type");
				var subjectId = $this.attr("data-subjectId");
				var isOuterLink = $this.attr("data-isOuterLink");
				var outerLinkUrl = $this.attr("href");
				var title = $this.attr("data-title");
				var href = null;
				var detailPage = null;
				//外链
				if(isOuterLink == 1) {
					//打开外部链接
					mui.openWindow({
						url: 'outer-link.html',
						id: 'outer-link.html',
						extras: {
							outerLinkUrl: outerLinkUrl
						},
						waiting: {
							autoShow: false
						},
						createNew: true
					});
				} else {
					/*//专题
					if (!subjectId) {
						if (type == 1) {
							console.log("图片新闻");
							href = 'images-details.html';
						} else {
							href = 'news-details.html';
						}
					} else {
						href = 'special-topic.html';
						detailPage = plus.webview.getWebviewById('special-topic.html');
					}*/
					//专题
					if(type == 1) {
						console.log("图片新闻");
						href = 'images-details.html';
					} else {
						href = 'news-details.html';
					}
					mui.fire(detailPage, 'detailId', {
						subjectId: subjectId,
						columnsId: columnsId,
						title: title
					});
					//打开详情页面          
					mui.openWindow({
						url: href,
						id: href,
						extras: {
							newsId: id
						},
						waiting: {
							autoShow: false
						},
						createNew: true //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
					});
				}
			});
			
			//计数换算成百分比
			template.helper('percentFormat', function (count, total) {
				var percent = parseFloat(parseInt(count)/parseInt(total))*100;
				
				if(total == 0){
					percent = '0%';
				}
				else{
					if(!Number.isInteger(percent)){
						percent = percent.toFixed(2) + '%';
					}
					else{
						percent = percent + '%';
					}
				}
			    
			    return percent;
			});
			
			function percentFormat(count, total){
				var percent = parseFloat(parseInt(count)/parseInt(total))*100;
				
				if(!Number.isInteger(percent)){
					percent = percent.toFixed(2) + '%';
				}
				else{
					percent = percent + '%';
				}
			    
			    return percent;
			}
			
			//进度条过渡效果
			function progressbarFlash(element){
				setTimeout(function(){
					element.find(".js-progressbar").each(function(){
						var $this = $(this);
						var percent = $this.next().text();
						
						$this.css("width", percent);
					});
				}, 0);
			}
			
			//统计单个问题的总票数
			function getSubtotal(parent){
				var subtotal = 0;
				
        		$(parent).find("input").each(function(){
        			if(this.checked){
        				var id = $(this).attr("data-id"),
        					subjectId = $(this).attr("data-subjectId"),
        					votedObj = new JointData(id, subjectId);
        					
        				this.value = parseInt(this.value) + 1;
        				votedArr.push(votedObj);
	                }
        			subtotal += parseInt(this.value);
        		});
            	
            	return subtotal;
			}
			
			//构造函数：拼接前台数据
			function JointData(id, subjectId){
				this.itemId = id;
				this.subjectId = subjectId;
			}
			
			//投票成功
			var votedArr = [];
            function voteSuccess(){
            	$("#voteBtn").closest(".vote").remove();//删除投票按钮区域
            	
            	$("#formBody").find(".answer-group").each(function(){
            		var $this = $(this), 
            			total = getSubtotal($this),
            			html = "",
            			len = $this.find("input").length;
            		
            		$this.find("input").each(function(index, value){
        				var item = $(this).attr("data-item"),
        					count = $(this).val(),
        					percent = percentFormat(count, total);
        				
        				html += '<div class="votes-row">'
							 + '<p class="votes-title">' + item + '</p>'
                             + '<div class="votes-total">'
                             + '<div class="votes-progressbar">'
                             + '<span class="progressbar js-progressbar"></span>'
                             + '<span class="votes-percent">' + percent + '</span>'
                        	 + '</div>'
                        	 + '<div class="votes-number">' + count + '</div>'
                  			 + '</div>'
                			 +'</div>';
            		});
                			 
                	$this.find(".answer-options").html(html);
            		progressbarFlash($this);
            	});
            	
//          	console.log(votedArr);
                $.ajax({
                    type: "get",
                    url: baseUrl + '/news/vote',
                    dataType: 'json',
                    data: {
                        voted : JSON.stringify(votedArr),
                        devicesId: uuid
                    },
                    success: function(data) {
                        
                    },
                    error: function(xhr, type, errorThrown) {
                        throwGetNewsError();
                    }
                });
            }
			
			//评论
			document.getElementById("commentsNum").addEventListener('tap', function() {
				if(document.getElementById("myVideo")) {
					mui("#myVideo")[0].pause();
				}
				//打开评论页面          
				mui.openWindow({
					url: 'comments.html',
					id: 'comments.html',
					waiting: {
						autoShow: false
					},
					extras: {
						newsId: newsId
					}
				});
			});
			//点赞
			document.getElementById("praiseNum").addEventListener('tap', function(e) {
				var $this = $(this);
				//根据id向服务器请求
				mui.ajax({
					url: baseUrl + '/news/createPraise?devicesId=' + uuid + '&newsId=' + newsId,
					dataType: 'json',
					type: 'get',
					success: function(data) {
						if(data.returnFlag == 0) {
							if(data.returnFlagCode == "P001") {
								praiseNum++;
								$this.addClass("c-blue").find(".iconfont").html("&#xe61e;");
								$this.find(".iconfont").append('<span class="mui-badge">' + praiseNum + '</span>');
							} else {
								praiseNum--;
								if(praiseNum <= 0) {
									$this.removeClass("c-blue").find(".iconfont").html("&#xe61f;");
								} else {
									$this.removeClass("c-blue").find(".iconfont").html("&#xe61f;");
									$this.find(".iconfont").append('<span class="mui-badge">' + praiseNum + '</span>');
								}
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						throwGetNewsError();
					}
				});
			});
			//收藏
			document.getElementById("collectNum").addEventListener('tap', function(e) {
				var $this = $(this);
				if(isLogin()) {
					//根据id向服务器请求
					mui.ajax({
						url: baseUrl + '/news/createCollect?devicesId=' + uuid + '&newsId=' + newsId,
						dataType: 'json',
						type: 'get',
						success: function(data) {
							if(data.returnFlag == 0) {
								if(data.returnFlagCode == "P001") {
									$this.addClass("c-blue").find(".iconfont").html("&#xe61c;");
									mui.toast("收藏成功");
								} else {
									$this.removeClass("c-blue").find(".iconfont").html("&#xe609;");
									mui.toast("取消收藏");
								}
							}
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							throwGetNewsError();
						}
					});
				} else {
					mui.openWindow({
						url: '../my_center/login.html',
						id: 'login.html',
						waiting: {
							autoShow: false
						}
					});
				}
			});
			//分享链接点击事件
			mui("#artShare").on('tap', "a", function() {
				var i = $(this).index();
				shareMsg(i);
			});

			function shareMsg(i) {
				var ids = [{
					id: "qq"
				}, {
					id: "weixin",
					ex: "WXSceneSession"
				}, {
					id: "sinaweibo"
				}, {
					id: "weixin",
					ex: "WXSceneTimeline"
				}];

				var s_id = ids[i].id;
				var share = shares[s_id];
				if(share) {
					if(share.authenticated) {
						shareMessage(share, ids[i].ex);
					} else {
						share.authorize(function() {
							shareMessage(share, ids[i].ex);
						}, function(e) {
							console.log("认证授权失败：" + e.code + " - " + e.message);
						});
					}
				} else {
					mui.toast("无法获取分享服务，请检查manifest.json中分享插件参数配置，并重新打包");
				}
			}

			mui("#settings .more-setting").on('tap', "li", function() {
				var i = $(this).index();
				var btn = null;
				var artShare = document.getElementById("artShare");
				var shareBtn = artShare.getElementsByTagName("a");
				switch(i) {
					case 0:
						btn = document.getElementById("collectNum");
						mui.trigger(btn, "tap");
						break;
					case 1:
						//正文字号
						showFontSize();
						break;
					case 2:
						//更多分享
						shareMsg(3);
						break;
					case 3:
						btn = shareBtn[1];
						mui.trigger(btn, 'tap');
						break;
					case 4:
						btn = shareBtn[0];
						mui.trigger(btn, 'tap');
						break;
					case 5:
						btn = shareBtn[2];
						mui.trigger(btn, 'tap');
						break;
				}
				mui('#settings').popover("hide");
			});
			// 原生系统选择字体大小
			function showFontSize() {
				plus.nativeUI.actionSheet({
					title: "请选择字号",
					cancel: "取消",
					buttons: [{
						title: "小"
					}, {
						title: "中"
					}, {
						title: "大"
					}]
				}, function(e) {
					if(e.index == 1) {
						$("#textBody").find("*").css("font-size", "14px"); //小
						$("#formBody").find("*").css("font-size", "14px");
						plus.storage.setItem("fontFlag", "1");
					}
					if(e.index == 2) {
						$("#textBody").find("*").css("font-size", "18px"); //中
						$("#formBody").find("*").css("font-size", "18px");
						plus.storage.setItem("fontFlag", "2");
					}
					if(e.index == 3) {
						$("#textBody").find("*").css("font-size", "22px"); //大
						$("#formBody").find("*").css("font-size", "22px");
						plus.storage.setItem("fontFlag", "3");
					}
				});
			}

			function shareMessage(share, ex) {
				var msg = {
					extra: {
						scene: ex
					}
				};
				msg.href = shareUrl + newsId;
				msg.title = title;
				msg.content = title;
				if(mui.os.ios) {
					if(~share.id.indexOf('weibo')) {
						msg.content += "；" + shareUrl + newsId;
					}
				}
				if(carouselImage == "") {
					carouselImage = "_www/images/logo.png";
				}

				msg.thumbs = [carouselImage];

				share.send(msg, function() {
					//发送收藏数据
					mui.ajax({
						url: baseUrl + '/news/createForward?devicesId=' + uuid + '&newsId=' + newsId,
						dataType: 'json',
						type: 'get',
						success: function(data) {
							if(data.returnFlag == 0) {}
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							throwGetNewsError();
						}
					});
					mui.toast("分享到\"" + share.description + "\"成功！ ");
					console.log("分享到\"" + share.description + "\"成功！ ");
				}, function(e) {
					console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
				});
			}
		</script>
	</body>

</html>